<template>
    <div class="write">
        <div class="title">
            <input type="text" placeholder="输入标题" v-model="title">
            <select v-model="kind">
              <option>HTML</option>
              <option>CSS</option>
              <option>JAVASCRIPT</option>
              <option>ES6</option>
              <option>NODE.JS</option>
              <option>VUE.JS</option>
              <option>JAVA</option>
              <option>PYTHON</option>
              <option>C</option>
              <option>C++</option>
              <option>PHP</option>
              <option>WEB</option>
              <option>JQUERY</option>
              <option>AJAX</option>
              <option>DOM</option>
              <option>XML</option>
              <option>NET</option>
              <option>JAVAWEB</option>
              <option>ELEMENT</option>
              <option>PS</option>
              <option>UI</option>
              <option>其它</option>
            </select>
            <div @click="issue()"><a href="###">发布</a></div>
        </div>

        <div class="main">
            <editor v-model="con" @push="add"></editor>
        </div>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import editor from '../../../../../static/js/editor'
export default {
    name: 'write',
    components : {
        editor,
    },

    data(){
      return{
        title: '',
        con: '',
        kind: '',

      }
    },

    methods: {
      add (param) {
        this.con = this.escapeStringHTML(param);
      },

      escapeStringHTML(str) {
        str = str.replace(/&lt;/g,'<');
        str = str.replace(/&gt;/g,'>');
        return str;
      },

      issue () {
        
        let postData = qs.stringify({
          title: this.title,
          content: this.con,
          clazz: this.kind,
        })

        axios.post(`/api/writeBlog`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            // alert(response.data)
            if (response.data === "发布成功") {
              this.$message({
                type: 'success',
                message: response.data
              })
              this.$router.push("/")
            }
            else {
              this.$message({
                type: 'error',
                message: response.data
              })
            }

          } 

        })
      
      },

    }

}
</script>

<style lang="stylus" scoped>
.write
  width 90%
  margin-left 5%
  margin-top 5rem
  padding-bottom 2rem
  margin-bottom 2rem
  position relative
  background-color #fff
  .title
    width 100%
    height 6rem
    position relative
    // background-color #fff
    input 
      width 72%
      line-height 3rem
      margin-top 1.8rem
      margin-left 9%
      font-size 1rem
      text-indent .5rem
      font-weight 700
      border .05rem #333 solid
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      //background-color skyblue
    select 
      width 5%
      height 2rem
      margin-left 1rem
      margin-top 2rem
      font-size .8rem
      border .05rem #333 solid
    div 
      width 6%
      position absolute
      line-height 3rem
      top 1.8rem
      right 5%
      text-align center
      border-radius 10%
      font-size 1.2rem
      border .05rem #ccc solid
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      background-color #fff
      a
        color #26a2ff
    div:hover
      background-color skyblue
      a
        color #fff
  .main
    width 90%
    height 35rem
    border .05rem #ccc solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    margin-left 5%
    background-color #fff
</style>